<template>
	<div class="width-100-percent">
		<span v-if="pageType === 'detail'">{{ dataList && dataList.length ? dataList.map(x => x.signalName).join() : '无' }}</span>
		<div v-else class="width-100-percent flex-start-center-wrap" @click="selectSignalDialogState = true">
			<div
				v-for="(item, index) in dataList || []"
				:key="index"
				style="width: calc(100% / 1);padding: 0 2px;box-sizing: border-box;"
			>
				<el-tag class="width-100-percent flex-between-center" :closable="true" type="primary" @close="onClearable(index)">
					<span style="overflow: hidden;text-overflow: ellipsis;width: 100%;white-space: nowrap;">{{ item.signalName }}</span>
				</el-tag>
			</div>
			<el-tag v-if="!dataList || !dataList.length" class="flex-center el-icon-plus" style="cursor: pointer;">点位</el-tag>
		</div>
		<selectSignalDialog
			:checked-list="dataList"
			:form-data="formData"
			:dialog-state="selectSignalDialogState"
			@on-visible-change="onVisibleChangeOfSelectSignalDialog"
			@on-confirm="onConfirmBtnOfSelectSignalDialog"
		></selectSignalDialog>
	</div>
</template>
<script>
    import selectSignalDialog from './select-signal-dialog';
    export default {
        components: {
            selectSignalDialog
        },
        props: {
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            pageType: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                dataList: [],
                selectSignalDialogState: false
            };
        },
        methods: {
            onClearable(index) {
                this.dataList.splice(index, 1);
                this.updateParentData(JSON.parse(JSON.stringify(this.dataList)));
            },
            onConfirmBtnOfSelectSignalDialog(arr) {
                this.updateParentData(arr);
                this.selectSignalDialogState = false;
            },
            updateParentData(arr) {
                this.$emit('on-confirm', arr);
            },
            onVisibleChangeOfSelectSignalDialog(e) {
                this.selectSignalDialogState = e;
            }
        },
        watch: {
            optionList: {
                handler(newVal) {
                    this.dataList = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
